<template>
    <div class="rootView">
        <!-- 订单顶部进度条 -->
        <!-- <div class="dd-steps flex-center-align">
            <div class="step-box">
                <el-steps
                    :active="progress + 1"
                    align-center
                    finish-status="success"
                >
                    <el-step title="拍下服务"></el-step>
                    <el-step title="支付完成"></el-step>
                    <el-step title="服务中"></el-step>
                    <el-step title="服务完成"></el-step>
                    <el-step title="已评价"></el-step>
                </el-steps>
            </div>
        </div> -->

        <div class="process">
            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/service_placeorder_process.png?v=1"
                alt="">
        </div>

        <!-- 订单详情 -->
        <div v-if="orderDetail.createtime" class="dd-info1">
            <div class="bold fz18 mb20">订单详情</div>
            <el-form :label-position="labelPosition" :inline="true">
                <el-form-item label="订单编号：">
                    <span>{{ orderDetail.order_sn }}</span>
                </el-form-item>
                <el-form-item label="交易时间：">
                    <span>{{ getTime(orderDetail.createtime * 1000) }}</span>
                </el-form-item>
                <el-form-item label="服务名称：">
                    <span>{{ orderDetail.onecatename }}</span>
                </el-form-item>
                <el-form-item v-if="orderDetail.status == 3" label="投标商家：">
                    <span>{{ serviceInfo.name }}</span>
                </el-form-item>
                <el-form-item v-if="orderDetail.status == 3" label="服务周期：">
                    <span>{{ cycle }}天</span>
                </el-form-item>
                <el-form-item label="服务金额：">
                    <span>{{ orderDetail.price }}元</span>
                </el-form-item>
                <!-- <el-form-item label="联系人：">
                    <span>{{ orderDetail.username }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话：">
                    <span>{{ orderDetail.mobile }}</span>
                    </el-form-item>
                    <el-form-item label="服务备注：">
                    <span class="fwbz ellipsis2">{{ orderDetail.remark }}</span>
                </el-form-item> -->
            </el-form>
            <!-- <div class="border">
                <img src="~/assets/images/service/border.png" alt="" class="img100" />
            </div> -->
            <img :src="demandOrder['demandOrder' + orderDetail.status]" alt="" class="status-img">
        </div>


        <div v-if="orderDetail.status != 3" class="dd-info1">
            <div class="bold fz18 mb20">需求交易确认</div>

            <div class="zysx">
                <p>注意事项及声明：</p>
                <p>1.您与该投标商家建立交易后，任务即改为已中标状态，暂时无法再与其他投标商家建立交易；</p>
                <p>2.您在设定交易金额、周期、内容时要以双方商定为准，否则商家不同意交易，交易则无法进行；</p>
                <p>3.商家同意交易，您完成付款，即开始正式交易，期间交易金额、周期、内容不可修改；</p>
                <p>4.所交易内容仅限于网络行业的商品/服务，与网络毫无关系的交易内容互站不提供中介担保服务，否则交易结果双方自负；</p>
                <p>5.交易不得侵害他人合法权益或违反法律法规，否则互站有权终止或拒绝提供交易担保服务，且需双方自行承担相关法律责任。</p>
            </div>

            <!-- <div class="describe">
                <div class="label">
                    需求交易
                </div>
                <div class="text">
                    需求标题任务即改为已中标状态，暂时无法再与其他投标商家建立交易；
                </div>
            </div> -->

            <div class="describe">
                <div class="label">
                    投标商家
                </div>
                <div class="text">
                    {{ serviceInfo.name }}
                </div>
            </div>
            <!-- <div v-if="orderDetail.createtime && userInfo" class="describe">
                <div class="label">
                    交易周期
                </div>

                <el-input-number v-if="orderDetail.status == 1 && orderDetail.user_id == userInfo.id" v-model="cycle"
                    :min="1" size="small"></el-input-number>
                <span v-else style="font-size: 18px;color: #1B8DFF;">
                    {{ cycle }}&nbsp;天
                </span>
                <span style="font-size: 18px;color: #060621;padding-left: 6px;">（也是服务商需要完成的周期）</span>
            </div> -->

            <div v-if="orderDetail.status == 1" class="describe">
                <div class="label">
                    交易金额
                </div>
                <span class="moeny_logo">￥</span>
                <el-input-number v-model="price" :min="0" size="small" :controls="false"
                    class="moeny_input"></el-input-number>
            </div>
            <template v-else>
                <div style="display: flex;">
                    <div class="describe" style="width: 50%;">
                        <div class="label">
                            交易金额
                        </div>
                        <span class="moeny_t">￥</span>
                        <span class="moeny_t">{{ price }}</span>
                    </div>
                    <div v-if="userInfo && userInfo.service_info && orderDetail.service_id == userInfo.service_info.id"
                        class="describe" style="width: 50%;">
                        <div class="label">
                            预计可得收益
                        </div>
                        <span class="moeny_t">￥</span>
                        <span class="moeny_t">{{ price * 0.98 }}</span>
                    </div>
                </div>
                <div v-if="userInfo && userInfo.service_info && orderDetail.service_id == userInfo.service_info.id"
                    style="font-size: 14px;color: #060621;padding-left: 50%;padding-top: 15px;">
                    注 ：平台结算后需扣除 <span style="color: #FA5151;">2 %</span>订单金额为平台的服务费用
                </div>
            </template>
        </div>

        <!-- <div class="dd-info1">
            <div class="bold fz18 mb20">需求详情</div>
            <div v-if="orderDetail.status == 1" class="textarea">
                <el-input v-model="textarea" type="textarea" style="width: 100%;" resize="none" :rows="5"
                    placeholder="请输入内容">
                </el-input>
            </div>
            <div v-else class="textarea2">
                {{ textarea }}
            </div>
        </div> -->

        <div v-if="orderDetail.status != 3" class="tips">
            *若交易产生纠纷，交易内容是评判交易是否完成、双方责任的重要依据，请认真填写！
        </div>

        <div v-if="(userInfo && orderDetail.status == 1 && userInfo.id == orderDetail.user_id) || (userInfo && orderDetail.status == 2 && userInfo.id != orderDetail.user_id)"
            class="confirm">
            <div v-if="orderDetail.status == 1" class="t" @click="submit">立即付款</div>
            <div v-if="orderDetail.status == 2" class="t" @click="hireServiceSubmit">确认提交</div>
            <div class="q" @click="quxiao">{{ orderDetail.status == 2 ? '拒绝' : '取消' }}</div>
        </div>
        <div v-if="(userInfo && (orderDetail.status == 2) && userInfo.id == orderDetail.user_id)" class="confirm">
            <div class="q" @click="quxiao">取消雇佣</div>
        </div>


        <div v-if="orderDetail.status == 3" class="dd-pay">
            <!-- 订单支付方式 -->

            <div class="pay-main">
                <div class="b-payment">
                    <!-- <div class="step-pay">
                        <div class="ch_pay bold fz18">请选择支付方式</div>
                        <div class="pay-nav flex">
                            <span class="pay flex-center-align" @click="payOnline = true">在线支付</span>
                            <span
            class="pay flex-center-align"
            :class="{ pay_s: !payOnline }"
            @click="payOnline = false"
            >线下汇款</span
          >
                        </div>
                    </div> -->
                    <!-- 线上支付 -->
                    <!-- <div class="online-pay flex mb70" v-if="payOnline">
                        <div class="payment flex-center-align pointer" :class="{
                            paymentCurrent:
                                select_pay_type == item.pay_type,
                        }" v-for="(item, index) in paymentList" :key="index" @click="select_pay_type = item.pay_type">
                            <img src="~/assets/images/service/pay_check1.png" class="selectIcon"
                                v-if="select_pay_type == item.pay_type" />
                            <img src="~/assets/images/service/pay_check0.png" class="selectIcon"
                                v-if="select_pay_type != item.pay_type" />
                            <img :src="item.icon" class="icon" alt="" />

                            <span>{{ item.name }}</span>
                        </div>
                    </div> -->

                    <el-checkbox v-model="agree" true-label="1" false-label="0">
                    </el-checkbox>
                    <span class="agree">
                        我已同意
                        <span @click.stop="goService()" class="c666 pointer">《小竹财税合同协议》</span>
                    </span>

                    <div class="pay-btn flex-center-align">
                        <template v-if="couponObj">
                            <span>优惠: </span>
                            <div class="fz20 bold cff4 mr30">
                                ￥{{ couponObj.voucher_reduce }}
                            </div>
                        </template>
                        <span>实付总额: </span>
                        <div class="fz30 bold cff4 mr30">
                            ￥{{ price }}
                        </div>
                        <span v-if="(userInfo && (orderDetail.status == 3) && userInfo.id == orderDetail.user_id)"
                            class="btn" @click="submit">立即付款</span>
                        <span v-if="(userInfo && (orderDetail.status == 3) && userInfo.id == orderDetail.user_id)"
                            class="btn" @click="quxiao"
                            style="background-color: #909399;width: 90px;margin-left: 10px;">取消</span>
                    </div>
                </div>
            </div>
            <!-- </div> -->
        </div>



        <!-- 支付协议弹窗 -->
        <div class="wxXieyi">
            <el-dialog :visible.sync="wxXieyiShow">
                <div>
                    <h3 style="display: flex; justify-content: center">
                        支付协议
                    </h3>
                    <br />
                    特别提示：您在同意协议前应完整、仔细地阅读本协议，您同意并继续支付将被视为完全理解并接受以下全部协议条款。您在小竹财税平台（包含：小竹财税APP、网页和小程序端）上同意本支付协议后，即成为本支付协议之授权人，该授权即刻发生效力。您如果不同意以下协议条款，请勿进行后续操作。<br />
                    一、授权人授权“小竹财税”通过第三方支付平台划扣结算费用。结算费用是指授权人通过小竹财税平台提交的订单上记载的总费用。<br />
                    二、在授权人成功提交订单后，小竹财税依照平台上公布的收费规则计算结算费用。授权人应在5分钟内根据页面指示完成支付。
                    <br />
                    三、如因授权人在第三方支付平台中的支付账户被锁定、盗用、被往来银行拒绝或账户无效等，以致支付账户付款失败时，小竹财税有权中止与授权人之间的服务协议。<br />
                    四、授权人如有冒用、盗用他人支付账户之行为，须自行承担法律责任。<br />
                    五、如您使用第三方支付平台完成支付，第三方会通过 SDK 收集您的以下信息完成支付，请您查看第三方隐私政策了解您的信息收集和使用情形。<br />
                    六、为保障支付安全、进行正常结算及提供更好的产品服务，小竹财税将收集、记录您充值购买虚拟币并在本平台相关功能产品/服务中使用该虚拟币所产生的数据，包括但不限于充值、签到、问答等产生的行为信息、交易记录（包括交易内容、交易状态、支付方式、金额、交易时间、交易单号）和账号余额等信息。<br />
                    七、在平台上使用小竹财税的付费项目，如果授权人要求退款且小竹财税同意退款，退款会返回支付时所使用的账户。<br />
                    八、授权人同意其消费产生的结算费用以小竹财税记录的数据为准，小竹财税将通过平台告知授权人。授权人对结算费用有异议，请通过小竹财税平台站内私信联系。<br />
                </div>
            </el-dialog>
        </div>


        <el-dialog title="" :visible.sync="PayShow" width="300px">
            <div style="text-align: center;font-size: 18px;padding: 0 0 20px;font-weight: 600;color: #000;">支付</div>
            <div style="display: flex;justify-content: center;">
                <vue-qr ref="qrCode" :text="payCode" color-dark="black" :margin="0" width="250px"
                    height="250px"></vue-qr>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    getServiceInfo, hire_service_detail, hire_service_submit, hire_service_status_update, pc_buy_vip, get_demand_id, service_processRefund
} from "@/assets/api/service";
import { goTopSmooth, getTime } from "@/assets/utils/utils";
import demandOrder1 from "@/assets/images/service/demandOrder1.png";
import demandOrder2 from "@/assets/images/service/demandOrder2.png";
import demandOrder3 from "@/assets/images/service/demandOrder3.png";
import demandOrder4 from "@/assets/images/service/demandOrder4.png";
import demandOrder5 from "@/assets/images/service/demandOrder5.png";
import demandOrder6 from "@/assets/images/service/demandOrder6.png";
import { mapState } from "vuex";

import {
    getUserOrderPayData,
    getOrderDetail,
    checkOrder,
    orderEvaluate,
    serviceVoucherList,
} from "@/assets/api/userCenterApi.js";
export default {
    name: "placeorder",
    components: {},
    head() {
        return {
            title: "服务商订单-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,服务商订单",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            demandOrder: {
                demandOrder0: '',
                demandOrder1: demandOrder1,
                demandOrder2: demandOrder2,
                demandOrder3: demandOrder3,
                demandOrder4: demandOrder4,
                demandOrder5: demandOrder5,
                demandOrder6: demandOrder6,
                demandOrder7: '',
                demandOrder: '',
            },
            getTime: getTime,
            price: 0,
            cycle: 1,
            textarea: '',
            shopDetail: null,

            labelPosition: "right",
            payOnline: true, //选择线上或线下支付方式
            select_pay_type: 1, //选择支付宝还是微信支付

            starValue: 0, //评价星级
            judge: "", //评价关键词

            showJudgePage: false, //展示评价

            showPingjiaZhong: false, //展示评价中-编辑状态
            showPingjiaSuccess: false, //展示评价成功
            showPingjia: false, //展示评价-本体
            showJingdu: false, //展示进度

            evaluate: {},

            goJudge: true,
            // isSureBtn: true, //是否点击确认按钮

            agree: true,
            PayShow: false, //支付弹窗
            finishToast: false, //确定服务完成弹窗
            OfflinePayShow: false, //线下支付确认弹窗

            orderDetail: {},

            orderNo: "",
            fromName: "",
            progress: 0,
            id: "",

            payHtml: "", //支付宝支付
            iframeSrc: "", //微信二维码地址

            timeLine: [],

            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
            info: {},
            serviceInfo: {},
            wxXieyiShow: false,

            couponList: [],
            couponObj: null,
            couponShow: false,
            checkIndex: null,

            voucherShow: (item) => {
                if (item.status != 1) return false;
                let voucher_amount = Number(item.voucher_amount);
                let moeny = Number(this.orderDetail.money);
                if (moeny < voucher_amount) return false;
                else return true;
            },

            loading: null,
            payCode: ''
        };
    },
    beforeMount() {
        this.$options.components["vue-qr"] = () => import("vue-qr");
    },
    mounted() {
        this.loading = this.$loading({
            lock: true,
            text: '获取订单信息中',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
        });
        goTopSmooth();
        this.id = this.$route.query.id;
        this.getOrderDetail()

    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        couponListShow: function () {
            if (this.orderDetail.voucher_id) return 0;
            let num = 0;
            let moeny = Number(this.orderDetail.money);

            for (let item of this.couponList) {
                let voucher_amount = Number(item.voucher_amount);
                if (moeny >= voucher_amount && item.status == 1) num++;
            }
            return num;
        },
    },
    methods: {

        selectCoupon(index) {
            this.checkIndex = index;
            this.couponObj = this.couponList[index];
            this.couponShow = false;
        },

        couponDialogShow() {
            if (this.orderDetail.voucher_id) return;
            if (this.couponListShow > 0) {
                this.couponShow = true;
            }
        },

        async hireServiceSubmit() {
            if (this.orderDetail.status == 1 && this.orderDetail.user_id == this.userInfo.id) {
                const res = await hire_service_submit({
                    id: this.id,
                    price: this.price,
                    trading_day: this.cycle,
                    detail: this.textarea
                })
                if (res.code == 1) {
                    this.$router.push({
                        path: '/user/mydemand'
                    })
                }
            }
            else if (this.orderDetail.status == 2 && this.orderDetail.user_id != this.userInfo.id) {
                this.hireServiceSubmitStatus(4)
            }
        },

        // 修改状态
        async hireServiceSubmitStatus(status) {
            const res = await hire_service_status_update({
                id: this.id,
                status: status,
            })
            if (res.code == 1) {
                if (this.orderDetail.user_id == this.userInfo.id)
                    this.$router.push({
                        path: '/user/mydemand'
                    })
                else
                    this.$router.push({
                        path: '/user/mydemandorder'
                    })

            }
        },

        async cancel_demand() {
            const res = await service_processRefund({
                id: this.id,
            })
            if (res.code == 1) {
                console.log('退款成功')
                this.hireServiceSubmitStatus(0)
            }
        },

        quxiao() {
            let that = this
            this.$confirm('该操作不可撤回，请确认', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(that.orderDetail.status)
                if (that.orderDetail.status != 1) {
                    that.cancel_demand()
                } else {
                    that.hireServiceSubmitStatus(0)
                }
            }).catch(() => {

            });
            // if (this.orderDetail.status == 2 && this.orderDetail.user_id != this.userInfo.id) this.hireServiceSubmitStatus(0)
            // if (this.orderDetail.status == 1 && this.orderDetail.user_id == this.userInfo.id) this.hireServiceSubmitStatus(0)
        },

        //获取详情
        async getOrderDetail() {

            var params = {
                id: this.id,
            };
            const res = await hire_service_detail(params);
            if (res.code == 1) {
                this.orderNo = res.data.order_sn
                this.orderDetail = res.data;
                this.price = Number(res.data.price)

                if (res.data.status != 1) {
                    this.textarea = this.orderDetail.detail
                    this.cycle = this.orderDetail.trading_day
                }

                this.progress = res.data.status;
                // this.lastSecond = res.data.countdown;

                // this.getcouponList();

                // if (res.data.evaluate) {
                //     this.evaluate = res.data.evaluate;
                // } else {
                //     this.evaluate = {};
                // }
                this.getServiceInfo(res.data.service_id);

                if (res.data.status == 1)
                    this.getDemandInfo(res.data.demand_id);
            }
            this.loading.close();

        },

        // 获取需求详情数据
        async getDemandInfo(id) {
            const res = await get_demand_id({
                demand_id: id,
            });
            if (res.code == 1) {

                this.textarea = res.data.info.describe
            }
        },

        //确认订单
        async checkOrder() {
            this.finishToast = false;
            var params = {
                order_id: this.orderDetail.id,
            };
            const res = await checkOrder(params);
            if (res.code == 1) {
                this.getOrderDetail();
            }
        },
        //支付按钮
        submit() {
            if (this.agree == false) {
                this.$message.warning("请勾选小竹财税合同协议");
                return;
            }
            if (!this.payOnline) {
                this.OfflinePayShow = true;
            } else {
                // this.payMoney();

                this.goPayCode()
            }
        },

        async goPayCode() {
            const res = await pc_buy_vip({
                order_sn: this.orderNo,
                money: this.price,
                combo_id: this.id
            })
            if (res.code == 1) {
                this.payCode = res.data
                this.PayShow = true;
                // 启动轮询
                this.lunxunOrder()
            }
        },

        async lunxunOrder() {
            if (!this.PayShow) return
            const res = await hire_service_detail({
                id: this.id,
            })
            if (res.code == 1 && res.data.status == 2) {
                this.$router.push({
                    path: '/user/mydemand'
                })
            } else {
                setTimeout(() => {
                    this.lunxunOrder()
                }, 1500)
            }
        },

        // 打开客服
        openKefu() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            localStorage.setItem("to_zim_userid", this.serviceInfo.user_id);
            this.$router.push({
                path: "/service/servicechat",
            });
        },
        // 用户协议跳转
        goService() {
            // window.open("https://api.xiaozhucaishui.com/xieyi/pc_pay.html", "_blank");
            this.wxXieyiShow = true;
        },

        //获取服务商详情
        async getServiceInfo(id) {
            let res = await getServiceInfo({ id: id });
            if (res.code == 1) {
                this.serviceInfo = res.data.info;
                console.log("服务商详情", this.serviceInfo);
                for (let item of res.data.serviceshoplist.data) {
                    if (this.orderDetail.shop_id == item.id) {
                        this.shopDetail = item
                        this.textarea = item.service_content
                        return
                    }
                }
            }
        },
        getServiceType(type) {
            var text = "";
            switch (type) {
                case 1:
                    text = "官方服务商";
                    break;
                case 2:
                    text = "金牌服务商";
                    break;
                case 3:
                    text = "银牌服务商";
                    break;
                case 4:
                    text = "铜牌服务商";
                    break;
                case 5:
                    text = "普通服务商";
                    break;
                case 6:
                    text = "个人服务商";
                    break;
            }
            return text;
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;

    .t {
        width: 254px;
        height: 62px;
        line-height: 62px;
        background: #1B8DFF;
        border-radius: 5px;
        color: #FFFFFF;
    }

    .q {
        width: 130px;
        height: 62px;
        background: rgba(27, 141, 255, 0.1);
        border-radius: 5px;
        border: 1px solid #1B8DFF;
        line-height: 60px;
        color: #1B8DFF;
    }

    div {
        text-align: center;
        font-size: 18px;
        margin: 0 30px;
        cursor: pointer;

        &:hover {
            opacity: 0.85;
        }
    }
}

.process {
    margin: 25px auto 0;
    width: 1200px;

    img {
        width: 100%;
        height: auto;
    }
}

.zysx {
    background: #F7F8FA;
    padding: 12px 20px;
    font-size: 16px;
    color: #060621;
    line-height: 30px;
}

.tips {
    margin-top: 16px;
    font-size: 16px;
    color: #060621;
}

.dd-info1 {
    position: relative;
    margin-top: 20px;
    padding: 14px 20px;
    width: 100%;
    // height: 252px;
    background: #ffffff;
    border-radius: 10px;

    .status-img {
        position: absolute;
        width: 138px;
        height: auto;
        top: 27px;
        right: 30px;
    }

    .textarea {
        margin-top: 13px;
    }

    .textarea2 {
        margin-top: 13px;
        min-height: 160px;
        background: #F7F8FA;
        border-radius: 10px;
        font-size: 16px;
        color: #060621;
        line-height: 23px;
        padding: 10px 16px;
    }

    .fwbz {
        max-width: 1045px;
    }

    .border {
        position: absolute;
        bottom: -5px;
        right: 0;
        width: 100%;
        height: 14px;
    }

    .describe {
        display: flex;
        align-items: center;
        margin-top: 20px;
        position: relative;

        .label {
            font-weight: 600;
            font-size: 18px;
            color: #060621;
            white-space: nowrap;
            margin-right: 12px;
        }

        .text {
            width: 100%;
            background: #F7F8FA;
            border-radius: 2px;
            height: 32px;
            line-height: 32px;
            padding: 0 16px;
        }

        .moeny_input {
            position: relative;
            top: 2px;

            &::v-deep .el-input__inner {
                text-align: left;
                font-weight: 600;
                font-size: 24px;
                color: #FF6900;
                padding-left: 20px;
            }
        }

        .moeny_logo {
            position: absolute;
            z-index: 10;
            left: 84px;
            font-weight: 600;
            font-size: 24px;
            color: #FF6900;
        }

        .moeny_t {
            font-weight: 600;
            font-size: 24px;
            color: #FF6900;
        }
    }
}


.rootView {
    margin: 0 auto;
    width: 1200px;
    padding-bottom: 30px;

    .dd-steps {
        margin-top: 25px;
        width: 100%;
        height: 188px;
        background-color: #fff;

        .step-box {
            width: 800px;
        }
    }


    .dd-pay {
        margin-top: 30px;
        width: 100%;

        .pay-nav {

            .pay {
                height: 100%;
                font-size: 14px;
                cursor: pointer;
            }

            .pay_s {
                width: 120px;
                height: 100%;
                font-size: 14px;
                cursor: pointer;
                background-color: #ffffff;
            }
        }

        .pay-main {
            width: 100%;

            .b-payment {
                position: relative;
                padding: 0 20px 0;
                padding-bottom: 80px;

                .payment {
                    margin-top: 20px;
                    margin-right: 20px;
                    padding: 0 30px;
                    width: 210px;
                    height: 68px;
                    background: #ffffff;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #ececec;
                    font-size: 18px;

                    &.paymentCurrent {
                        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
                    }

                    .selectIcon {
                        width: 25px;
                        height: 25px;
                    }

                    .icon {
                        margin: 0 10px;
                        width: 40px;
                        height: 40px;
                    }
                }

                .offline-pay {
                    .pay-bank {
                        width: 104px;
                        height: 86px;
                    }

                    .tip {
                        margin-top: 30px;
                        margin-bottom: 50px;
                        font-size: 12px;
                        color: #999;
                    }
                }

                .pay-btn {
                    margin-bottom: 30px;
                    // width: 425px;
                    height: 42px;
                    position: absolute;
                    bottom: 12px;
                    right: 39px;

                    .btn {
                        display: inline-block;
                        text-align: center;
                        width: 140px;
                        height: 42px;
                        line-height: 42px;
                        background: #1c87f3;
                        border-radius: 4px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }

        .step-pay {
            // padding: 0 30px;

            .ch_pay {
                // padding: 0 30px;
                width: 100%;
                height: 70px;
                line-height: 70px;
            }
        }


    }
}

.ErwmToast {
    text-align: center;

    .erwm {
        display: flex;
        align-items: center;
        justify-content: center;

        .iframe {
            // width: 148px;
            // height: 148px;
            width: 333px;
            height: 333px;
            border-width: 0;
        }
    }

    .icon {
        margin-right: 5px;
        width: 30px;
        height: 30px;
    }
}

.agree {
    font-size: 14px;
    color: #9e9e9e;

    img {
        width: 14px;
        height: 17px;
    }
}

.dd-info2 {
    align-items: center;
    margin-top: 25px;
    padding: 30px;
    background-color: #fff;

    img {
        margin-right: 30px;
        width: 126px;
        height: 126px;
    }

    .btn2 {
        width: 117px;
        height: 42px;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        font-size: 14px;
    }

    .tip {
        margin: 20px 0;
        width: 74px;
        height: 20px;
        background: #ffe6e6;
        border-radius: 50px;
        color: #e43c3c;
    }
}

.wxXieyi ::v-deep .el-dialog {
    border-radius: 8px;
    height: 500px;
    overflow: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.dd-line {
    height: 1px;
    background: #f0f0f2;
    border-left: 35px solid #ffffff;
    border-right: 35px solid #ffffff;
}
</style>

<style lang="scss" scoped>
::v-deep .el-form-item {
    min-width: 540px;
    margin-bottom: 0;
}

::v-deep .el-form-item__label {
    color: #9e9e9e;
}

::v-deep .bankInfo .el-form-item__content {
    color: #333;
    line-height: 30px;
}

::v-deep .bankInfo .el-form-item__label {
    color: #333;
    line-height: 30px;
}

::v-deep .el-rate__icon {
    font-size: 40px;
}

::v-deep .el-rate {
    height: 36px;
}

::v-deep .el-textarea {
    width: 800px;
}

::v-deep .el-dialog {
    border-radius: 8px;
}

::v-deep .el-dialog__header {
    padding: 0 !important;
}

.wxPay ::v-deep .el-dialog {
    border-radius: 8px;
    height: 500px;
}

.wxPay ::v-deep .el-dialog__body {
    padding: 30px 0 !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: #333;
}

::v-deep .el-step__title {
    font-size: 14px;
}

::v-deep .is-success {
    color: #fa5151;
    border-color: #fa5151;
}

::v-deep .el-step__title.is-success {
    color: #000;
}
</style>./placeorder.vue
